<template>
	<view class="wrapper set">
		<!--菜单-->
		<view class="set-list">
			<view class="set-item main-flex user">
				<view class="set-item-name">头像</view>
				<view class="set-item-info main-flex-item main-flex">
					<view class="set-item-header">
						<u-avatar
							size="56"
							mode="aspectFill"
							bg-color="#f5f5f5"
							default-url="/static/images/icon/avatar.png"
							:src="imgUrl(userStore?.user?.heardImg)"></u-avatar>
						<!--#ifdef MP-WEIXIN-->
						<button
							class="set-item-header-btn"
							@chooseavatar="changeHeader"
							open-type="chooseAvatar">上传头像</button>
						<!--#endif-->
						<!--#ifndef MP-WEIXIN-->
						<button
							class="set-item-header-btn"
							@click="changeHeader"
							open-type="chooseAvatar">上传头像</button>
						<!--#endif-->
					</view>
				</view>
				<view class="set-item-right">
					<uni-icons type="right" size="20" color="#333"></uni-icons>
				</view>
			</view>
			<!-- <view class="set-item main-flex" @click="goUrl('/pages/mine/edit?key=nickName')">
				<view class="set-item-name">昵称</view>
				<view class="set-item-info main-flex-item main-flex">{{userStore?.user?.nickName}}</view>
				<view class="set-item-right">
					<uni-icons type="right" size="20" color="#333"></uni-icons>
				</view>
			</view> -->
			 <!-- @click="goUrl('/pages/mine/edit?key=name')" -->
			<view class="set-item main-flex">
				<view class="set-item-name">姓名</view>
				<view class="set-item-info main-flex-item main-flex">{{userStore?.user?.name}}</view>
				<view class="set-item-right">
					<uni-icons type="right" size="20" color="#333"></uni-icons>
				</view>
			</view>
			<view class="set-item main-flex" @click="bindPhone">
				<view class="set-item-name">联系电话</view>
				<view class="set-item-info main-flex-item main-flex">{{phoneText(userStore?.user?.phone)}}</view>
				<view class="set-item-right">
					<uni-icons type="right" size="20" color="#333"></uni-icons>
				</view>
			</view>
			<view class="set-item main-flex" @click="goUrl('/pages/mine/forget')">
				<view class="set-item-name">重置密码</view>
				<view class="set-item-info main-flex-item main-flex"></view>
				<view class="set-item-right">
					<uni-icons type="right" size="20" color="#333"></uni-icons>
				</view>
			</view>
		</view>
		<!--#ifndef MP-WEIXIN-->
		<button class="ty-button ty-button-confirm set-submit" @click="submit">注销</button>
		<!--#endif-->
	</view>
</template>

<script setup>
import { computed, ref, watch, watchEffect } from 'vue';
import { onReady, onLoad, onReachBottom, onShow, onHide } from '@dcloudio/uni-app';
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'
import { phoneText } from '@/utils/ty'
import { upload } from "@/api/system/common"
import modal from '@/plugins/modal'
import { updateHeard } from "@/api/app_api/user"
import { cancellation } from "@/api/app_api/login"

	const userStore = useUserStore()
	const setStore = useSetStore()
	// 页面跳转
	const goUrl = (url) => {
		uni.navigateTo({
			url
		})
	}
	const goWeb = (type) => {
		uni.navigateTo({
			url: `/pages/web/web?type=${type}`
		})
	}
	const isSubmit = ref(false)
	const submit = () => {
		uni.showModal({
			title: '注销',
			content: '确认注销当前账号?',
			success: function (res) {
				if (res.confirm) {
					isSubmit.value = true
					cancellation().then(res => {
						uni.$u.toast('注销成功')
						isSubmit.value = false
						uni.$u.sleep(1000).then(() => {
							uni.reLaunch({
								url: '/pages/login/login'
							})
						})
					}).catch(err => {
						isSubmit.value = false
					})
				}
			}
		})
	}
	
	// 上传头像
	const changeHeader = (e) => {
		// #ifdef MP-WEIXIN
		if (e.target.avatarUrl) {
			upoladFun(e.target.avatarUrl)
		}
		// #endif
		// #ifndef MP-WEIXIN
		uni.chooseImage({
			count: 1,
			success: function (res) {
				console.log(res.tempFilePaths[0])
				upoladFun(res.tempFilePaths[0])
			}
		})
		// #endif
	}
	// 图片上传
	const upoladFun = (img) => {
		uni.showLoading({
			title: '图片上传中'
		})
		upload(img).then(res => {
			const data = JSON.parse(res.data)
			if (data.code === 200 && data.url) {
				setHeader(data.url)
			} else {
				uni.$u.toast('上传失败')
			}
			uni.hideLoading()
		}).catch(err => {
			uni.$u.toast(err)
			uni.hideLoading()
		})
	}
	// 提交
	const setHeader = (header) => {
		isSubmit.value = true
		updateHeard({
			heardUrl: header
		}).then(res => {
			uni.$u.toast(res.msg)
			isSubmit.value = false
			userStore.getUserInfo()
			uni.$u.sleep(1000).then(() => {
				uni.navigateBack({
					delta: 1
				})
			})
		}).catch(err => {
			isSubmit.value = false
		})
	}
	const bindPhone = () => {
		if (userStore?.user?.phone) return false
		goUrl('/pages/mine/bind')
	}
	onLoad((options) => {
	})
	
</script>

<style lang="scss">
	.set {
		padding: 20rpx;
		&-list {
			background-color: #ffffff;
			border-radius: 20rpx;
			padding: 0 20rpx;
			&+.set-list {
				margin-top: 20rpx;
			}
		}
		&-item {
			min-height: 96rpx;
			padding: 20rpx 0;
			box-sizing: border-box;
			&+.set-item {
				border-top: 1px solid $line-color;
			}
			&-name {
				font-size: 28rpx;
			}
			&-info {
				font-size: 26rpx;
				justify-content: flex-end;
			}
			&-header {
				position: relative;
				&-btn {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					margin: 0;
					padding: 0;
					opacity: 0;
				}
			}
		}
		&-submit {
			height: $button-height;
			background-color: $primary-color;
			padding: 0;
			margin: 0;
			margin-top: 40rpx;
			font-size: 32rpx;
			color: #ffffff;
			justify-content: center;
		}
	}
</style>
